<script setup lang="ts">

import { activityDetailApi, activityOrderDetailApi, editActivityOrderApi } from '@/api/lucky';
import { ref } from 'vue';
const orderId = ref('');
const code = ref('');
const activityId = ref("");
const kefuQrImg = ref('');
const formData = ref({
  contactName: '',
  contactPhone: '',
  contactAddress: '',
  code: '',
});

const formRef = ref();
const rules = ref([
  {
    contactPhone: '',
    rules: [
      {
        required: true,
        errorMessage: '必填项',
      },
    ],
  },
]);
const hasContactPhone = computed(() => {
  return !!orderDetail.value.contact;
});
async function handleConfirm() {
  // await formRef.value.validate();
  editActivityOrderApi({
    orderId: orderId.value,
    contactName: formData.value.contactName,
    contactPhone: formData.value.contactPhone,
    contactAddress: formData.value.contactAddress,
  }).then(async (res) => {
    uni.showToast({
      title: '提交成功',
      icon: 'success',
    });
    await loadOrderDetail()
  });
}
function gotoWechat() {
  const wechatId = 'wllsdd';
  window.location.href = `weixin://addfriend/?nickname=&verify=&ticket=&scene=&sourceid=&uin=&key=&from=&isappinstalled=0&version=7.0.5&lang=zh_CN&pass_ticket=&wechatid=${wechatId}`;
}
// 定义 抽奖 奖品
const prize = ref<any>({
  id: 0,
  name: '', // 奖品名称
  img: '', // 奖品图片
  num: 0,
});
const orderDetail = ref<any>({});
async function loadOrderDetail() {
  const data = await activityOrderDetailApi({ id: orderId.value })
  orderDetail.value = data;
  prize.value = data.prize;
  kefuQrImg.value = data.activity.kefuQrImg;
  if (data.contact) {
    console.log("orderDetail", data.contact)
    formData.value.contactAddress = data.contact.address;
    formData.value.contactName = data.contact.name;
    formData.value.contactPhone = data.contact.mobile;
  }
}

onLoad((options: any) => {
  if (options && options.orderId) {
    orderId.value = options.orderId
    loadOrderDetail()
  }
});

</script>

<template>
  <view class="wrapper">
    <view style="line-height: 30px; text-align: center;font-size: 30px; font-weight: 500;padding: 30px;">
      <text>恭喜您抽中奖品-{{ prize.name }}</text>
    </view>
    <view>
      <view>
        <text>
          按照以下步骤兑奖
        </text>
      </view>
      <uni-section title="第一步" type="line">
        <uni-card v-if="!hasContactPhone" title="填写资料" sub-title="为了方便兑奖，请先填写以下资料">
          <uni-forms ref="formRef" :rules="rules" label-width="100">
            <uni-forms-item v-if="false" required label="姓名" name="contactName">
              <uni-easyinput v-model="formData.contactName" type="text" placeholder="请输入姓名" />
            </uni-forms-item>
            <uni-forms-item required label="联系电话" name="contactPhone">
              <uni-easyinput v-model="formData.contactPhone" type="text" placeholder="请输入联系电话" />
            </uni-forms-item>
            <uni-forms-item v-if="false" required label="地址" name="contactAddress">
              <uni-easyinput v-model="formData.contactAddress" type="text" placeholder="请输入联系电话" />
            </uni-forms-item>
            <uni-forms-item>
              <button class="contact-bt" @click="handleConfirm">
                <text>提交</text>
              </button>
            </uni-forms-item>
          </uni-forms>
        </uni-card>
        <uni-card v-if="hasContactPhone" title="资料已提交">
          <view>
            <text>联系方式：</text>
            <text>{{ orderDetail.contact.mobile }}</text>
          </view>
        </uni-card>
        <view style="padding: 10px 20px ; color: #999999;">
          <text>
            注：若因填写资料或资料填写错误导致无法兑奖，主办方不承担相关法律责任
          </text>
        </view>
      </uni-section>
      <uni-section title="第二步" sub-title="扫码添加客服微信兑奖">
        <button v-if="false" @click="gotoWechat">
          点击添加客服微信
        </button>
        <view class="imgae-container">
          <image :src="kefuQrImg" mode="scaleToFill" style="width: 300rpx;height: 300rpx;" />
          <!-- <text>wllsdd</text> -->
        </view>
      </uni-section>
    </view>
    <view v-if="false" class="footer">
      <button class="confirm-bt" @click="handleConfirm">
        <text>提交</text>
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.imgae-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imgae-container text {
  font-size: 20px;
  color: #999999;
  margin-top: 10px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;

  .confirm-bt {
    width: 100%;
    height: 100rpx;
    background-color: #13d269;
    color: #ffffff;
    border-radius: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

.contact-bt {
  width: 100%;
  height: 100rpx;
  background-color: #13d269;
  color: #ffffff;
  border-radius: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
